<template>
  <div class="profile-container">
    <el-card class="profile-card">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
      </div>
      <el-form label-width="100px" class="profile-form">
        <el-form-item label="用户名">
          <span>{{ username }}</span>
        </el-form-item>
        <el-form-item label="昵称">
          <span>{{ nickname || '未设置' }}</span>
        </el-form-item>
        <el-form-item label="邮箱">
          <span>{{ email || '未设置' }}</span>
        </el-form-item>
        <el-form-item label="手机号">
          <span>{{ phone || '未设置' }}</span>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="profile-card">
      <div slot="header" class="clearfix">
        <span>修改密码</span>
      </div>
      <el-form ref="passwordForm" :model="passwordForm" :rules="passwordRules" label-width="100px" class="profile-form">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input v-model="passwordForm.oldPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword" type="password" show-password />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="updatePassword">修改密码</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { updatePassword } from '@/api/auth'

export default {
  name: 'Profile',
  data() {
    const validateNewPassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能少于6个字符'))
      } else {
        if (this.passwordForm.confirmPassword !== '') {
          this.$refs.passwordForm.validateField('confirmPassword')
        }
        callback()
      }
    }
    const validateConfirmPassword = (rule, value, callback) => {
      if (value !== this.passwordForm.newPassword) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      passwordRules: {
        oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
        newPassword: [{ required: true, trigger: 'blur', validator: validateNewPassword }],
        confirmPassword: [{ required: true, trigger: 'blur', validator: validateConfirmPassword }]
      },
      loading: false
    }
  },
  computed: {
    ...mapGetters([
      'userId',
      'username',
      'nickname',
      'email',
      'phone'
    ])
  },
  methods: {
    updatePassword() {
      this.$refs.passwordForm.validate(valid => {
        if (valid) {
          this.loading = true
          updatePassword(this.passwordForm.oldPassword, this.passwordForm.newPassword)
            .then(() => {
              this.$message({
                message: '密码修改成功',
                type: 'success',
                duration: 5 * 1000
              })
              this.passwordForm.oldPassword = ''
              this.passwordForm.newPassword = ''
              this.passwordForm.confirmPassword = ''
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-container {
  padding: 20px;
  
  .profile-card {
    margin-bottom: 20px;
    
    .profile-form {
      max-width: 500px;
    }
  }
}
</style> 